<template>
	<view class="container">
		<u--image :showLoading="true" :src="works.path" width="100%" height="100vh"></u--image>
		<u-popup :show="show" @close="close" mode="center" :closeable="true" round="20">
			<view class="notice-cont" @click="download">
				<view class="item">
					<view>
						<h3>超清无水印原图</h3>
						<text class="notice">看完广告自动下载</text> <br>
						<text class="notice free" v-if="freetimes<=0">看3次广告,当天可获得3次免广告下载</text>
						<text class="notice free" v-if="freetimes>0">当前可免广告下载{{freetimes}}次</text>
					</view>
					<view class="rt">
						<u-icon name="play-circle" color="#fff"></u-icon>
						<text>超清下载</text>
					</view>
				</view>
			</view>
		</u-popup>
		<view class="left">
			<view class="creator" @click="toCreatorIndex(works.creator.id)">
				<image class="head" :src="works.creator.avatar" mode=""></image>
				<u--text :text="works.creator.word" align="center" size="20"></u--text>
			</view>
			<u-icon name="heart-fill" :color="heartColor" size="60" @click="like"></u-icon>
			<u-icon name="download" :color="iconColor" size="70" @click="open"></u-icon>
			<u-icon name="info-circle" :color="iconColor" size="50" @click="openFeedback"></u-icon>
			<!-- #ifdef MP-TOUTIAO -->
			<button open-type="share" style="position: static;background-color: rgba(244, 245, 246, 0);padding: 0;">
				<u-icon name="share-square" :color="iconColor" size="55"></u-icon>
			</button>
			<!-- #endif -->
		</view>
		<!-- 反馈表单 -->
		<u-popup :show="formShow" mode="center" @close="formShow=false" customStyle="width:90%;padding:20rpx;"
			round="10">
			<view class="feedback">
				<view class="image">
					<u--image :src="works.path" radius="8" mode="aspectFill"></u--image>
				</view>
				<textarea style="border-bottom: 1px solid #eee;font-size: 28rpx;" placeholder-style="color:#ccc;"
					v-model="reason" placeholder="请填写您要反馈的信息">
				</textarea>
				<!-- 				<u--textarea placeholderStyle="color: #ccc;fontSize: 28rpx;" focus count v-model="reason"
					placeholder="请填写您要反馈的信息" border="surround" maxlength="200" width="120rpx" height="300rpx">
				</u--textarea> -->
			</view>
			<input style="border-bottom: 1px solid #eee;font-size: 28rpx;" placeholder-style="color:#ccc;"
				placeholder="请输入手机号(选填)" border="bottom" v-model="contact"></input>
			<u-button text="提交" color="#2B93FE" :customStyle="buttonStyle" @click="feedback"></u-button>
		</u-popup>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex'
	export default {
		computed: {
			...mapState(['hasLogin', 'userInfo'])
		},
		data() {
			return {
				buttonStyle: {
					marginTop: '20px'
				},
				works: {},
				show: false,
				formShow: false,
				iconColor: "#000",
				heartColor: "#000",
				afterLogin: "like",
				wid: 0,
				freetimes: 0,
				ad: {},
				reason: '',
				contact: ''
			}
		},
		onReady() {
			uni.showLoading({
				title: '加载中'
			});
		},
		onLoad(params) {
			this.wid = params.id
			this.getDetail(params.id)
			// #ifdef MP-TOUTIAO
			// 创建实例
			this.ad = tt.createRewardedVideoAd({
				adUnitId: "9wlcpukm4vuzw68o40",
			});

			// 监听错误
			this.ad.onError((err) => {
				tt.hideLoading();
				switch (err.errCode) {
					case 1004:
						// 无合适的广告
						break;
					default:
						// 更多请参考错误码文档
				}
			});

			if (this.ad.closeHandler) {
				this.ad.offClose(this.ad.closeHandler);
				console.log("this.ad.offClose卸载成功");
			}
			this.ad.closeHandler = (res) => {
				console.log('onClose回调', res.isEnded)
				if (res.isEnded) {
					console.log("观看了", res.count, "个视频");
					this.saveToLocal()
				} else {
					console.log("未观看完视频");
				}
			};
			this.ad.onClose(this.ad.closeHandler);
			// 预加载资源
			this.ad.load();
			// #endif
		},
		methods: {
			closeModal() {
				this.formShow = false
			},
			feedback() {
				if (this.reason == '') {
					uni.showToast({
						title: '请填写反馈信息'
					})
					return false;
				}
				const data = {
					wid: this.wid,
					reason: this.reason,
					contact: this.contact
				}

				this.$api.feedback(data).then(() => {
					this.formShow = false
					this.reason = ''
					uni.showToast({
						title: '感谢您的反馈'
					})
				})
			},
			openFeedback() {
				this.formShow = true
			},
			// 跳转作者主页
			toCreatorIndex(id) {
				uni.navigateTo({
					url: '/pages/creator/index?id=' + id
				})
			},
			download() {
				this.show = false;
				tt.showLoading();
				if (this.freetimes <= 0) {
					this.ad.show();
				} else {
					this.saveToLocal()
				}
			},
			saveToLocal() {
				// 下载图片
				uni.downloadFile({
					url: this.works.path,
					success: (res) => {
						if (res.statusCode == 200) {
							// 保存图片
							uni.saveImageToPhotosAlbum({
								filePath: res.tempFilePath,
								success: (res) => {
									uni.showToast({
										title: '已保存到相册'
									})
									this.show = false
								}
							})
						}
					},
					fail: (res) => {
						console.log(res)
					}
				});
				this.$api.download({
					wid: this.works.id
				})
			},
			like() {
				this.afterLogin = 'like'
				if (!this.hasLogin) {
					this.getUserinfo()
				} else {
					const options = {
						data: {
							wid: this.works.id,
							type: 1
						}
					}
					this.$api.like(options).then((res) => {
						if (res.data == 1) {
							this.heartColor = "red"
						} else {
							this.heartColor = "#000"
						}
					})
				}
			},
			onShareAppMessage(res) {
				let that = this;
				let desc = '给你推荐了[' + that.works.creator.word + ']的作品'
				// this.checkContent(desc)
				return {
					desc: desc,
					path: "/pages/works/show?id=" + that.wid,
					imageUrl: 'static/icon/logo.png',
					templateId: 'sj6ul7hbgc29bs623u'
				}
			},
			checkContent(text) {
				const data = {
					'content': text
				}
				this.$api.checkContent(data).then((res) => {

				})
			},
			getDetail(id) {
				this.$api.getDetail(id).then((res) => {
					setTimeout(() => {
						uni.hideLoading();
					}, 100)
					this.works = res.data
					if (res.data.is_like) {
						this.heartColor = "red"
					}
				})
			},
			open() {
				this.afterLogin = 'open'
				if (!this.hasLogin) {
					this.getUserinfo()
				} else {
					this.getFreeTimes()
					this.show = true;
				}
			},
			getFreeTimes() {
				this.$api.freetimes().then((res) => {
					this.freetimes = res.data
				})
			},
			close() {
				this.show = false
			},
			//获取用户信息、授权
			getUserinfo(e) {
				// #ifdef MP-QQ
				this.toutiaoLogin('qq');
				// #endif
				// #ifdef MP-TOUTIAO
				this.toutiaoLogin('toutiao');
				// #endif
			},
			//抖音登录
			toutiaoLogin(provider) {
				uni.login({
					provider: provider,
					success: (data) => {
						let code = data.code;
						uni.getUserInfo({
							success: (info) => {
								this.userinfo = info.userInfo;
								let obj = {
									code,
									nickname: this.userinfo.nickName,
									avatar: this.userinfo.avatarUrl,
									platform: this.$api.platfrom,
									invite_code: this.inviteId,
								}
								this.$api.login(obj).then(result => {
									if (result.code == 1) {
										let token = uni.getStorageSync("token")
										this.userinfo.token = token;
										this.userinfo.userId = result.data.user_id;
										this.is_authoriization = true;
										this.login(this.userinfo);
										uni.showToast({
											title: '登录成功',
											duration: 1000
										})
										this.getDetail(this.wid)
										if (this.afterLogin == 'open') {
											this.open()
										}
										// if (this.afterLogin == 'like') {
										// 	console.log('like')
										// 	this.like()
										// }

									}
								})
							}
						})
					}

				})

			},
			...mapMutations(['login', 'logout'])
		}
	}
</script>

<style lang="scss" scoped>
	.feedback {
		display: flex;
		margin-bottom: 10px;

		.image {
			margin-right: 10rpx;
		}
	}

	.main-img {
		width: 100vw;
		height: 100vh;
	}

	.left {
		position: fixed;
		bottom: 300rpx;
		right: 20rpx;
		width: 100rpx;
		height: 600rpx;
		border-radius: 18rpx;
		background-color: rgba(255, 255, 255, 0.4);
		text-align: center;
		display: flex;
		flex-flow: column;
		align-items: center;
		justify-content: space-around;
		padding: 20rpx 0;
		border: none;

		.creator {
			.head {
				width: 70rpx;
				height: 70rpx;
				border-radius: 50%;
			}
		}

		.icon {
			padding-left: 20rpx;
		}
	}

	.notice-cont {
		padding: 80rpx 40rpx 0;
		width: 600rpx;

		h3 {
			font-size: 30rpx;
		}

		.item {
			display: flex;
			justify-content: space-between;
			margin-bottom: 20rpx;

			.rt {
				display: flex;
				align-items: center;
				background-color: #2979FF;
				height: 50rpx;
				padding: 0 30rpx;
				color: #fff;
				font-size: 24rpx;
				border-radius: 6rpx;

				text {
					padding-left: 6rpx;
					line-height: 46rpx;
				}
			}
		}

		.notice {
			font-size: 24rpx;
			color: #999;
			padding: 30rpx 0;
		}

		.free {
			color: #f3b810;
		}

	}
</style>
